<template>
	<view>
		<u-navbar title="選擇商品" placeholder autoBack>
			<view class="flexright" slot="right">
				<u-icon name="scan" color="#333" size="20" @click="jumpurl('/pages/goodsOrder/saomagmpos')"></u-icon>
			</view>
		</u-navbar>
		<u-sticky>
			<view class="mainpadding ffffff">
				<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
					placeholder="請輸入搜索内容" v-model="name" @confirm="getList()"></u--input>
				<view class="flexbetween margin_top">
					<view class="flexleft">
						<view :class="current==3?'color_ling text_a':'color_six text_a'" @click="screenGoods()">分類篩選
						</view>
						<view class="screen" style="margin-left: 5rpx;"></view>
					</view>
					<view :class="current==0?'color_ling text_a':'color_six text_a'" @click="selectCom()">
						綜合排序
					</view>
					<view class="flexleft">
						<view :class="current==1?'color_ling text_a':'color_six text_a'" @click="selectSale()">銷量排序
						</view>
						<view>
							<view :class="type==2?'checkshang':'nocheckshang'"></view>
							<view :class="type==1?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
						</view>
					</view>
					<view class="flexleft">
						<view :class="current==2?'color_ling text_a':'color_six text_a'" @click="selectPrice()">價格排序
						</view>
						<view>
							<view :class="type==4?'checkshang':'nocheckshang'"></view>
							<view :class="type==3?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
						</view>
					</view>
				</view>
				<view class="margin_top">
					<scroll-view class="white_nowrap" scroll-x>
						<view class="flexleft">
							<view class="margin_right2" v-for="(item,index) in shop_class">
								<view :class="item.isChecked?'cateSelect':'cateNoSelect'" @click="selectCate(item)">
									{{item.name}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2" style="padding-bottom: 150rpx;">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top flexleft ffffff radius" style="position: relative;" v-for="item in list.data"
				:key="item.id" @click="jumpdetail(item.id)">
				<!-- <view class="fuwulable">{{item.id}}</view> -->
				<view class="listleftimg radius margin_right">
					<image class="listleftimg radius" :src="item.logoimage" mode=""></image>
				</view>
				<view style="width: 100%;height: 157rpx;" class="flexcolumnbet">
					<view class="hei_text main_size bold">{{item.name}}</view>
					<view class="xiaohui yihang">{{item.des}}</view>
					<view class="flexleft">
						<view class="neiyong lableradius xiaohuang margin_right2">免運</view>
						<view class="xiaohui">月售{{item.count}} 庫存{{item.end_num==-1?'不限':item.end_num}}</view>
					</view>
					<view class="titletext huang_text bold">${{item.new_price}}</view>
				</view>
			</view>
		</view>
		<view class="posibottom mainpadding">
			<view class="flexbetween">
				<view class="leftAllprice flexleft mainpadding ffffff">
					<view class="cart margin_right3" @click="chakan">
						<view class="num" v-text="total"></view>
					</view>
					<view class="line_r margin_right2"></view>
					<view class="hei_text main_size">合計：</view>
					<view class="color_red main_size" v-text="'$'+totalPrice"></view>
				</view>
				<view class="rightsubmit flexcenter mainpadding" @click="chakan">
					<view class="hei_text main_size">結帳</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				type: 0, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
				shop_id: uni.getStorageSync("shop_id"),
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				shop_class: [],
				shopclassify_id: "",
				name: "",
				totalPrice: 0,
				total: 0,
				orderType: 0,
				orderly: 0, //是否来自预约订單？0否，1是
				posdc: 0, //是否为pos点餐？0否，1是
				shopcreatehj: 0, //是否为商家创建呼叫订单？0否，1是
			}
		},
		onLoad(options) {
			uni.$off("screenId")
			uni.$on("screenId", data => {
				console.log(data, "選擇的分類id");
				this.shopclassify_id = data
				this.getList()
			})
			if (options.type) {
				this.orderType = options.type
				uni.setStorageSync("orderType", this.type)
			}
			if (options.orderly) {
				this.orderly = options.orderly
			}
			if (options.posdc) {
				this.posdc = options.posdc
			}
			if (options.shopcreatehj) {
				this.shopcreatehj = options.shopcreatehj
			}
			
			this.getGoodsCate()
			this.getList()
		},
		onShow() {
			this.getorderinfo()
		},
		methods: {
			async getorderList() { //获取订單详情的商品
				let res = await this.http.request('/api/Ordergoods/deailOrdergoods', 'POST', {
					id: uni.getStorageSync("order_goods_id")
				})
				if (res.code == 1) {
					res.data.goods_data.forEach(item => {
						item.logoimage = this.imgUrlUser + item.logoimage
					})
					if (this.posdc == 1) {
						this.list.data = res.data.goods_data
					} else {
						this.list.data = res.data.goods_data.filter(item => {
							return item.is_zhui == 1 && item.is_zhuipay == 0
						})
					}
					this.dataAll = res.data
					this.totalPrice = 0
					this.totalwtjPrice = 0
					if (this.list.data.length) {
						this.list.data.forEach(item => {
							this.totalPrice = Number(this.totalPrice) + Number(item.price)
							if (item.is_ti == 0) {
								this.totalwtjPrice = Number(this.totalwtjPrice) + Number(item.price)
							}
						})
					}
					if (this.dataAll.cdbjhsf_data_text.length) {
						this.dataAll.cdbjhsf_data_text.forEach(item=>{
							this.totalPrice = Number(this.totalPrice) + Number(item.total_price)
						})
					}
					this.opentype = res.data.opentype
					this.tbcode = res.data.tbcode
					this.tbmc = res.data.tbmc
					if (res.data.tbcode) {
						this.istijiao = true
					}
					console.log(this.list.data);
					// console.log(this.list.data)
				} else if (res.code == 0) {
					// this.list.data = []
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			jumpurl(url) {
				uni.navigateTo({
					url
				})
			},
			chakan() {
				if (this.orderType == 1) {
					uni.navigateTo({
						url: "/pages/callOutOrder/callOrderSelectGoods?shopcreatehj="+this.shopcreatehj
					})
				} else {
					if (this.orderly == 1) {
						uni.navigateTo({
							url: "/pages/yuYueOrder/xuanzeyysp?orderly=1"
						})
					} else {
						uni.navigateTo({
							url: "/pages/callOutOrder/xuanzesp?orderly=" + this.orderly + "&posdc=" + this.posdc
						})
					}

				}
			},
			async getorderinfo() { //获取订單详情的商品
				let url = ""
				let data = {}
				if (this.orderType == 1) {
					url = "/api/Ordercall/callGoodslist"
					data = {
						id: uni.getStorageSync("order_call_id")
					}
				} else {
					if (this.orderly == 1) { //預約，商品訂單提交的商品列表
						url = "/api/ordergoods/shopOrderCartIndex"
						data = {
							order_goods_id: uni.getStorageSync("order_goods_id"),
							shop_id: this.shop_id
						}
					} else { //pos點餐提交的商品列表
						url = "/api/Ordergoods/deailOrdergoods"
						data = {
							id: uni.getStorageSync("order_goods_id")
						}
					}
				}
				let res = await this.http.request(url, 'POST', data)
				if (res.code == 1) {
					if (this.orderType == 1) {
						let arr = res.data.calllist
						let totalPrice = 0
						if (arr) {
							arr.forEach(item => {
								totalPrice = Number(totalPrice) + Number(item.price)
							})
						}
						this.total = arr.length || 0
						this.totalPrice = totalPrice || 0
					} else {
						if (this.orderly == 1) { //預約，商品訂單提交的商品列表
							let totalPrice = 0
							res.data.forEach(item => {
								totalPrice = Number(totalPrice) + Number(item.price)
							})
							this.total = res.data.length
							this.totalPrice = totalPrice
						} else { //pos點餐提交的商品列表
							let arr = []
							if (this.posdc == 1) {
								arr = res.data.goods_data
							} else {
								arr = res.data.goods_data.filter(item => {
									return item.is_zhui == 1 && item.is_zhuipay == 0
								})
							}
							let totalPrice = 0
							if (arr.length) {
								arr.forEach(item => {
									totalPrice = Number(totalPrice) + Number(item.price)
								})
							}
							this.total = arr.length || 0
							this.totalPrice = totalPrice
							if (res.data.cdbjhsf_data_text.length) {
								res.data.cdbjhsf_data_text.forEach(item=>{
									this.totalPrice = Number(this.totalPrice) + Number(item.total_price)
								})
							}
						}

					}
				}
			},
			getGoodsCate() { //商品分类
				let _this = this
				this.http.request('/api/shop/shopCategory', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res => {
					if (res.code == 1) {
						if (res.data) {
							res.data.forEach(item => {
								this.$set(item, "isChecked", false)
							})
							this.shop_class = res.data
						}
						this.shop_class.unshift({
							name: "全部",
							id: "",
							isChecked: true
						})
					} else if (res.code == 0) {
						// this.http.toast(res.msg)
					} else {
						this.http.toast('系統處理中，請稍後再試');
					}
				})
			},
			screenGoods() { //商品分类筛选
				this.current = 3
				this.type = 0
				uni.navigateTo({
					url: "/pages/workbench/classifyScreen?type=1"
				})
			},
			selectCom() { //商品综合排序
				this.current = 0
				this.type = 0
				this.getList()
			},
			selectSale() { //商品销量排序
				this.current = 1
				this.type = this.type == 1 ? 2 : 1
				this.getList()
			},
			selectPrice() { //商品价格排序
				this.current = 2
				this.type = this.type == 3 ? 4 : 3
				this.getList()
			},
			selectCate(value) { //商品選擇分类
				this.shop_class.forEach(item => {
					item.isChecked = false
				})
				value.isChecked = true
				this.shopclassify_id = value.id + ","
				this.getList()
			},
			async getList(isPage, page) { //商品列表
				let _this = this
				console.log(this.shopclassify_id);
				let shopclassify_id = this.shopclassify_id == "" ? [] : this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length == 0 ? "" : shopclassify_id[shopclassify_id.length - 1] ==
					"" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				let res = await this.http.request('/api/goods/Goodslist', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id, //店鋪id
					shopclassify_id: category_id,
					type: this.type,
					name: this.name
				})
				uni.hideLoading()
				if (res.code == 1) {
					res.data.data.forEach(item => {
						item.logoimage = this.imgUrlUser + item.logoimage
					})
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						_this.list = res.data
						_this.list.data = resList.data;
					}
					// console.log(this.list.data);
				} else if (res.code == 0) {
					this.list.data = []
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
			jumpdetail(id) {
				if (this.orderType == 1) {
					uni.navigateTo({
						url: "/pages/callOutOrder/callGoodsdetail?id=" + id
					})
				} else {
					if (this.orderly == 1) { //預約訂單商品訂單點餐
						uni.navigateTo({
							url: "/pages/yuYueOrder/goodsdetail?id=" + id
						})
					} else { //pos點餐點餐
						uni.navigateTo({
							url: "/pages/callOutOrder/goodsdetail?id=" + id + "&posdc=" + this.posdc
						})
					}
				}
			}
		}
	}
</script>

<style>
	.cart {
		width: 40.5rpx;
		height: 42.58rpx;
		background-image: url("@/static/image/system/cart_num.png");
		background-size: 100% 100%;
		position: relative;
	}

	.num {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		background: #FF5C00;
		border-radius: 50%;
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		font-size: 17rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.searchBox {
		// height: 50rpx;
		background: #FFFFFF;
		border-radius: 65rpx 65rpx 65rpx 65rpx;
		border: 1rpx solid #999;
		padding: 8rpx;
		box-sizing: border-box;
	}
</style>